import { PlusOutlined } from "@ant-design/icons"
import { Upload, UploadFile } from "antd"
import axios from "axios"
import { useEffect, useState } from "react"
import { useCtx } from "../ctx"

export const SkerUploadMulti: React.FC<{ maxCount: number, action: string, params?: any, onUpload: (values: any[]) => void, value: UploadFile[] }> = ({ maxCount, params, action, onUpload, value }) => {
    const [fileList, setFileList] = useState<UploadFile[]>(value)
    const [url, setUrl] = useState<string>(action)
    useEffect(() => {
        if (params) {
            const u = new URL(url, 'http://localhost')
            Object.keys(params).map(k => u.searchParams.set(k, params[k]))
            setUrl(`${action}${u.search}`)
        }
    }, [params])

    const { message } = useCtx()
    return <Upload
        maxCount={maxCount}
        multiple={false}
        listType='picture-card'
        onRemove={e => {
            onUpload(fileList.filter(it => it.uid !== e.uid))
        }}
        action={url}
        fileList={fileList}
        onChange={({ file, fileList, event }) => setFileList(fileList)}
        customRequest={async (options) => {
            axios.post(options.action, { file: options.file }, {
                withCredentials: true,
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => res.data).then(res => {
                if (!res.success) {
                    message.error(res.message)
                    options.onError({ status: 200, method: 'post', message: res.message, name: 'UploadError' })
                    return;
                }
                const data = res.data;
                const files: UploadFile[] = [
                    ...fileList,
                    { uid: data.key, name: data.key, url: data.url }
                ]
                onUpload(files)
                options.onSuccess(res.data)
            }).catch(e => options.onError(e))
        }}>
        <PlusOutlined />
    </Upload>
}


export const SkerUploadOne: React.FC<{ action: string, params?: any, onUpload: (values: any) => void, value: any[] }> = ({ params, action, onUpload, value }) => {
    const [fileList, setFileList] = useState<UploadFile[]>(value)
    const [url, setUrl] = useState<string>(action)

    useEffect(() => {
        if (params) {
            const u = new URL(url, 'http://localhost')
            Object.keys(params).map(k => u.searchParams.set(k, params[k]))
            console.log(u.search)
            setUrl(`${action}${u.search}`)
        }
    }, [params])
    const { message } = useCtx()
    return <Upload
        maxCount={1}
        multiple={false}
        listType='picture-card'
        onRemove={e => {
            console.log(e)
        }}
        action={url}
        fileList={fileList}
        onChange={({ file, fileList, event }) => setFileList(fileList)}
        customRequest={async (options) => {
            axios.post(options.action, { file: options.file }, {
                withCredentials: true,
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => res.data).then(res => {
                if (!res.success) {
                    message.error(res.message)
                    options.onError({ status: 200, method: 'post', message: res.message, name: 'UploadError' })
                    return;
                }
                onUpload(res.data)
                options.onSuccess(res.data)
            }).catch(e => options.onError(e))
        }}>
        <PlusOutlined />
    </Upload>
}